<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>heart</title>
    <style>
      
      p{
        font-size: 30px;
        font-weight: 30px;
        color: green;
      }
      
        *{
            margin: 0;
            padding: 0;
        }
        html,body{     /*荣容器的高度和宽度都充满全屏  */
            height: 100%;
            width: 100%;
        }
        body{
            background-color: pink;
            display: flex;
            flex-direction: row;
            align-items: center;/* 水平居中 */
            justify-content: center;/* 垂直居中 */
        }
        .heart{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            transform: rotate(45deg); /* 顺时针旋转45度 */
            animation: heart 2s alternate 5; /* 动画名称 heart 持续时间 1s 重复次数5次 */
            box-shadow: 20px 20px 50px pink;/* 添加阴影xiaog */
        }
            .heart::before{
            content: "";
            width: 200px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: -99px;  /* 中心点位置向上移100px */
            left:0;
           border-radius:100px 100px 0 0; /* 改圆角 */
           box-shadow: 20px 20px 50px red;
        }
        .heart::after{
            content: "";
            width: 100px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 0;
            left: -99px;   /* 中心点位置向左移100px，后改为99可以避免不重合 */
            border-radius: 100px  0  0 100px ; /* 改圆角 */
            box-shadow: 20px 20px 50px red;
        }
        /* 这里可以添加动画效果 */
        @keyframes heart{
            0%{
                transform: rotate(45deg) scale(0.5);
            }
            25%{
                transform: rotate(45deg) scale(1.2);
            }
            50%{
                transform: rotate(45deg) scale(0.8);
            }
            75%{
                transform: rotate(45deg) scale(1.2);
            }
            100%{
                transform: rotate(45deg) scale(0.5);
            }
        }
    </style>
</head>
<body>
    <div class="heart"></div>
   <div class="text">
    <P>这是一颗炙热的心</P>
</div> 
</body>
</html>